<html>
<head>
<title>shapes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	function state_change(data) {
		//alert(data.state+":"+data.selected);
	}
	$('img').mapster({
		onStateChange: state_change,
		fillColor: '0a7a0a',
		fillOpacity: 0.7,
		mapKey: "group",
		noHrefIsMask: false,
		render_select: {
			fillColor: 'adadad',
			fillOpacity: 0.5

		},
		areas: [
			{
				key: 'blue-circle',
				includeKeys: 'rectangle'
			},
			{
				key: 'rectangle',
				stroke: true,
				strokeWidth: 3
			},
			{
				key: 'outer-circle',
				includeKeys: 'outer-circle-perimeter,inner-circle-perimeter'
			},
			{
				key: 'inner-circle',
				stroke: true,
				strokeColor: 'adadad',
				strokeWidth:3,
				fill: true

			},
			{
				key: 'outer-circle-perimeter',
				stroke: true,
				strokeWidth:3,
				fill: false

			},
			{
			    key: 'inner-circle-perimeter',
			    stroke: true,
			    strokeWidth: 3,
			    fill: false

			}


		]

	});

});
</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<h2>Shapes Demo (For Full IE Compatibility)</h2>
<p>While masks sort of work for Internet Explorer 6-8, if you really want to create areas within areas, you can use polygons to split
a shape into two connecting parts and combine them as a group. This example is created by rendering the outer circle in two
"c-shaped" halves and rendering the inner circle separately. The other "shapes" demo uses masks and much less markup to do the same thing,
but more complex situations where the inner area is not a solid color might not work as well in IE.</p>
<p><ul><li>The outer circle is selected independently from the inner circle.</li>
<li>The rightmost rectangle is selected with the center circle (and has independent rendering options), but does not itself respond to mouse events.</li>
</ul>
</p>
<p><a href="/imagemapster">Return to ImageMapster home</a></p>
<img src="images/shapes.jpg" width="512" height="176" border="0" alt="" usemap="#shapes_Map">
<map name="shapes_Map">
<!-- ImageReady Slices (shapes.jpg) -->
<area shape="rect" group="rectangle" alt="" coords="378,39,463,116" nohref>
<area shape="poly" group="blue-circle" alt="" coords="286,34, 298,42, 308,54, 314,79, 307,103, 292,118, 270,125, 242,122, 227,112, 216,97, 212,73, 219,53, 227,43, 240,34, 264,29" href="#">
<area shape="poly" group="outer-circle" alt="" coords="100,22, 100,46, 90,47, 88,48, 82,51, 73,58, 66,68, 64,81, 65,90, 66,92, 69,98, 77,107, 85,112, 95,115, 100,115, 100,139, 93,138, 83,137, 81,136, 73,133, 71,132, 60,125, 49,113, 42,99, 39,85, 40,69, 41,67, 44,57, 51,45, 65,32, 81,25, 85,24, 91,23" href="#">
<area shape="poly" group="outer-circle" alt="" coords="108,23, 123,26, 139,35, 151,48, 158,62, 161,76, 160,92, 159,94, 156,104, 149,116, 135,129, 125,134, 115,137, 109,138, 100,138, 100,115, 111,114, 113,113, 122,108, 132,98, 135,92, 137,83, 136,71, 135,69, 132,63, 124,54, 113,48, 109,47, 105,46, 100,46, 100,22"
href="#">
<!-- End ImageReady Slices -->

<area shape="circle" group="inner-circle" coords="101,81,36" href="#">

<!-- concentric circles for stroke highlighting -->
<area shape="circle" group="inner-circle-perimeter" coords="101,81,36" nohref>
<area shape="circle" group="outer-circle-perimeter" coords="100,81,59" nohref>
<!-- End circles -->

</map>

</body>
</html>
